<template>
  <tm-app>
    <view class="fulled-height overflowlive-chat-page flex flex-col">
      <tm-sheet
        margin="0"
        round="0"
        color="info"
        class="flex-1 overflow-x"
        padding="0"
      >
        <tm-sheet
          v-for="(item, index) in messageList"
          :key="index"
          color="transparent"
          class="flex flex-row-top-center"
          :class="{ 'flex-reverse': item.sendId == userInfo.id }"
        >
          <!-- phtot -->
          <tm-sheet color="transparent" margin="0" padding="0">
            <tm-image
              :width="88"
              :height="88"
              round="100"
              :src="
                item.sendId === userInfo.id
                  ? item.senderPhoto
                  : item.receiverPhoto
              "
              class="flex-shrink"
            ></tm-image>
          </tm-sheet>
          <!-- content -->
          <tm-sheet
            color="transparent"
            :margin="[25, 0]"
            padding="0"
            class="flex-1 ml-n5"
            :align="item.sendId == userInfo.id ? 'right' : 'left'"
          >
            <!-- content-text -->
            <view
              class="flex"
              :class="{ 'flex-end': item.sendId == userInfo.id }"
            >
              <tm-sheet margin="0" align="left">
                <tm-text>{{ item.content }}</tm-text>
              </tm-sheet>
            </view>
            <tm-text color="#959eb0" fontSize="24" class="mt-10">{{
              item.time
            }}</tm-text>
          </tm-sheet>
          <tm-sheet
            :width="88"
            :height="88"
            color="transparent"
            margin="0"
            padding="0"
            class="flex-shrink"
          ></tm-sheet>
        </tm-sheet>
      </tm-sheet>
      <!-- Footer -->
      <tm-sheet margin="0" round="0" class="flex-shrink flex flex-start">
        <tm-button width="100" round="10">Sell</tm-button>
        <tm-input
          v-model="messageStr"
          :placeholder="$trans('pages.liveChat.sendInputPlaceholder')"
          class="ml-n5 mr-n5 flex-1"
          round="10"
        ></tm-input>
        <tm-icon
          name="add-circle-line"
          color="#979FAF"
          size="80"
          @click="onChooseImg"
        ></tm-icon>
      </tm-sheet>
    </view>
  </tm-app>
</template>

<script lang="ts" setup>
import { MSG_LIST } from "./MOCK"
// 当前登录用户信息
const userInfo = reactive({
  id: 1,
})
const messageStr = ref("")
const messageList = ref([])

const onChooseImg = () => {
  uni.chooseMedia({
    count: 1,
    mediaType: ["image"],
    success: (res) => {
      console.log(res)
    },
  })
}

const getMessageList = () => {
  messageList.value = MSG_LIST
}

onMounted(() => {
  // 获取消息列表
  getMessageList()
})
</script>

<style lang="scss">
page {
  height: 100%;
}

.live-chat-page {
  // height: 100%;
  // display: flex;
  // flex-flow: column;
  // .page-container {
  //   flex: 1;
  //   overflow: auto;
  // }
}
</style>
